<template>
  <div class="home">
    <div class="block">
      <el-carousel trigger="click" height="580px" :autoplay="autoplay">
        <el-carousel-item v-for="item in 4" :key="item" :class="'index'+item"></el-carousel-item>
      </el-carousel>
    </div>
    <!--综合解决方案-->
    <div class="lg-container ">
      <el-row class="layer">
        <el-col :span="24">
          <h2 class="grid-content bg-purple-dark">综合解决方案</h2>
        </el-col>
        <el-col :span="24">
          <h3 class="grid-content bg-purple-dark">Solution</h3>
        </el-col>
        <el-col :span="6">
          <div class="classLayer">
            <img class="titImg" src="../assets/img/home/lsls.png" alt="">
            <div class="tit">
              会员管理管理解决方案
            </div>
            <p class="titB">
              支付即会员；客户分级管理；消费记录查询与分析
            </p>
          </div>

        </el-col>
        <el-col :span="6">
          <div class="classLayer">
            <img class="titImg" src="../assets/img/home/fxgl.png" alt="">
            <div class="tit">
              分销管理解决方案
            </div>
            <p class="titB">
              灵活价格控制；各种分析查询
            </p>
          </div>

        </el-col>
        <el-col :span="6">
          <div class="classLayer">
            <img class="titImg" src="../assets/img/home/cwyth.png" alt="">
            <div class="tit">
              财务一体化管理解决方案
            </div>
            <p class="titB">
              标准化财务核算体系；部门独立核算体系；其他模块与财务无缝连接
            </p>
          </div>

        </el-col>
        <el-col :span="6">
          <div class="classLayer">
            <img class="titImg" src="../assets/img/home/shwx.png" alt="">
            <div class="tit">
              售后维修管理解决方案
            </div>
            <p class="titB">
              售前机返厂处理；返厂机库存、颜色、串号变动的记录；售后机两种维修方式；有效结合增值服务业务
            </p>
          </div>

        </el-col>
        <el-col :span="6">
          <div class="classLayer">
            <img class="titImg" src="../assets/img/home/hygl.png" alt="">
            <div class="tit">
              会员管理管理解决方案
            </div>
            <p class="titB">
              支付即会员；客户分级管理；消费记录查询与分析
            </p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="classLayer">
            <img class="titImg" src="../assets/img/home/jth.png" alt="">
            <div class="tit">
              集团化管理解决方案
            </div>
            <p class="titB">
              唯一会计制度及核算方式；准确的数据汇总及报表合并 ; 统一商品信息；集团区域化管理
            </p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="classLayer">
            <img class="titImg" src="../assets/img/home/ccgl.png" alt="">
            <div class="tit">
              仓储管理解决方案
            </div>
            <p class="titB">
              成本管理与调整；补货需求分析；库存分析查询
            </p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="classLayer">
            <img class="titImg" src="../assets/img/home/jggl.png" alt="">
            <div class="tit">
              价格管理解决方案
            </div>
            <p class="titB">
              完整价格策略；随时调整价格取值
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--新闻中心-->
    <div class="layer newLayer">
      <div class="lg-container ">
        <el-row>
          <el-col :span="24">
            <h2 class="grid-content bg-purple-dark">新闻中心</h2>
          </el-col>
          <el-col :span="24">
            <h3 class="grid-content bg-purple-dark">News Center</h3>
          </el-col>
          <el-col :span="24" class="pt20">
            <el-col :span="12">
              <router-link to="home">
                <el-button type="primary" class="nbtn" size="medium">公司新闻</el-button>
              </router-link>
            </el-col>
            <el-col :span="12">
              <router-link to="home">
                <el-button type="primary" class="nbtn" size="medium">行业动态</el-button>
              </router-link>
            </el-col>
          </el-col>
          <el-col :span="24" class="pt20">
            <el-col :span="12">
              <el-col :span="10">
                <router-link to="home">
                  <img src="../assets/img/home/news2.jpg" class="image">
                </router-link>
              </el-col>
              <el-col :span="14" class="nef">
                <router-link to="home">
                  锐意变革 创新不止：云盛联达ERP系统正式上线。
                </router-link>
              </el-col>
            </el-col>
            <el-col :span="12" class="pl20">
              <el-col :span="24">
                <router-link to="home" class="ne">
                  中国通讯连锁发展战略大会：联邦集团与云盛联达达成战略合作
                </router-link>
              </el-col>
              <el-col :span="24" style="margin-top: 32px;">
                <router-link to="home" class="ne">
                  中国通讯连锁发展战略大会在京开展
                </router-link>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="pt20">
            <el-col :span="12">
              <el-col :span="10">
                <router-link to="home">
                  <img src="../assets/img/home/news4.jpg" class="image">
                </router-link>
              </el-col>
              <el-col :span="14" class="nef">
                <router-link to="home">
                  2017年中国通讯连锁行业转型发展 敢问路在何方？
                </router-link>
              </el-col>
            </el-col>
            <el-col :span="12" class="pl20">
              <el-col :span="24">
                <router-link to="home" class="ne">
                  租赁型OA办公软件成企业新宠
                </router-link>
              </el-col>
              <el-col :span="24" style="margin-top: 32px;">
                <router-link to="home" class="ne">
                  通信行业全年趋势：仰望5G的星空 脚踏光纤的实地
                </router-link>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="pt20">
            <router-link to="home" class="ne">
              查看更多>>
            </router-link>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--合作伙伴-->
    <div class="layer ">
      <div class="lg-container ">
        <el-row>
          <el-col :span="24">
            <h2 class="grid-content bg-purple-dark">合作伙伴</h2>
          </el-col>
          <el-col :span="24">
            <h3 class="grid-content bg-purple-dark">Cooperative Partner</h3>
          </el-col>

          <img src="../assets/img/home/compang.png" height="309px" class="image">
        </el-row>
      </div>
    </div>

  </div>
</template>
<script>
  export default{
    data(){
      return {
        autoplay: true
      }
    }
  }

</script>
<style scoped="">
  .el-carousel__item {
    background-repeat: no-repeat;
    background-color: #e7e7e7;
    background-size: cover;
    background-position: center;
  }

  .el-carousel__item.index1 {
    background-image: url("../assets/img/home/banner580.png");
  }

  .el-carousel__item.index2 {
    background-image: url("../assets/img/home/joinbg.png");
  }

  .el-carousel__item.index3 {
    background-image: url("../assets/img/home/pdBanner.png");
  }

  .el-carousel__item.index4 {
    background-image: url("../assets/img/home/price.png");
  }

  .titB {
    padding: 5px 15px 5px 15px;
    text-align: left;
    height: 104px;
    font-size: 16px;
    color: #849ba8;
  }

  .tit {
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: white;
    font-size: 16px;
    color: #666666;
    border-bottom: 1px solid #eeeeee;
  }

  .titImg {
    width: 100%;
  }

  .classLayer {
    margin: 10px 25px;
    border: 1px solid #eeeeee;
  }

  .nbtn {
    height: 50px;
    font-size: 22px;
    width: 238px;
  }

  .image {
    width: 100%;
    display: block;
  }

  .nef {
    height: 140px;
    text-align: center;
    padding-top: 30px;
    background-color: #ffffff;
    color: #666666;
  }

  .ne {
    background: white;
    line-height: 54px;
    text-align: center;
    font-size: 16px;
    color: #666666;
    display: block;
  }

  .pt20 {
    padding-top: 20px;
  }

  .pl20 {
    padding-left: 20px;
  }
</style>
